html,
body {
  background-image: url(../image/fg1.png);
  background-repeat: repeat-y;
  background-size: 100%;
  background-position: 0px -200px;
  position: relative;
  font-family: "microsoft yahei", Verdana, Arial, 微软雅黑;
}
.box {
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
}
.container {
  margin: 0px auto;
  width: 1080px;
}
.header {
  height: 110px;
  position: relative;
  img{
    width: 60px;
    height: 60px;
    border-radius: 50%;
    position: absolute;
    left: 180px;
    top: 10px;
  }
  .nickname{
    color: #B55E11;
    position: absolute;
    left: 250px;
    top: 30px;
    font-size: 18px;
    cursor: pointer;
  }
  .exit{
    position: absolute;
    left: 330px;
    top: 35px;
    cursor: pointer;
    &:hover{
      color: #cfad12;
    }
  }
}
nav {
  background: #DDD04D;
  background: rgba(221,208,77,0.9);
  position: relative;
  marquee{
    position:absolute;
    width: 300px;
    left: 190px;
    top: 10px;
    font-size: 16px;
    color: #232B6A;
  }
  .nav {
    height: 42px;
    font-size: 18px;
    color: #B55E11;
    position: relative;
    li{
      a{
        position: absolute;
        z-index: 1;
        display: inline-block;
        line-height: 42px;
        width: 100px;
        height: 100px;
        border-radius: 50%;
        line-height: 100px;
        text-align: left;
        padding-left: 10px;
        font-weight: 600;
        font-size: 14px;
        color: #B55E11;
        animation: diarycon 5s infinite alternate;
      }
    }
 
    li:nth-of-type(1) a{
      left: 670px;
      top: -32px;
      background: #232B6A;
      padding-left: 20px;
    }
    li:nth-of-type(2) a{
      left: 730px;
      top: -32px;
      background: #B2C9AC;
    }
    li:nth-of-type(3) a{
      left: 801px;
      top: -32px;
      background: #E6E299;
    }
    li:nth-of-type(4) a{
      left: 870px;
      top: -32px;
      padding-left: 15px;
      background: #D9A748;
    }
    li:nth-of-type(5) a{
      left: 935px;
      top: -32px;
      background: #DFD051;
      padding-left: 15px;
    }

    li a:hover {
      cursor: pointer;
      background: #B55E11;
      color: #DDD04D;
    }

    li:hover a {
      color: #DDD04D;
    }

  }
}

footer{
  width: 100%;
  height: 60px;
  line-height: 60px;
  text-align: center;
  background: rgba(0, 0, 0, 0.5);
  overflow: hidden;
  color: #cfad12;
  font-weight: 600;
}

@keyframes diarycon
{
    0% {box-shadow:0px 0px 6px 1px rgb(216, 216, 198);}
    25% {box-shadow:0px 0px 10px 1px rgb(221, 220, 174);}
    50% {box-shadow:0px 0px 12px 1px rgb(214, 211, 40);}
    75% {box-shadow:0px 0px 10px 1px rgb(214, 211, 45);}
    100% {box-shadow:0px 0px 6px 1px rgb(221, 220, 174);}    
}
